The Brief:Build  a  3 pagemini-site based  onyour  Responsive Designpage  completed  as  Prep  for unit.DeliverablesA 3 page mini-site that includes the...

The Brief:

Build  a  3 pagemini-site based  onyour  Responsive Designpage  completed  as  Prep  for unit.

Deliverables

A 3 page mini-site that includes the following pages:

·         A home page

·         The Responsive Design page from the Prep for unit activity

o   You are welcome to further develop this page.

·         A pager that provides a minimum of 5 examples of accessible content with corresponding descriptive copy stating what makes them accessible. Whatever you do on this page must be explicitly written about within the copy of the page.

o   Here are some examples, but don’t restrict yourself to them.

§  Try out some fonts/font sizes that are very accessible

·         There’s even a font that helps people with Dyslexia to read easily:

·         http://www.dyslexiefont.com/en/dyslexia-font/

§  Experiment with colour contrast using a professional colour scheme

·         Try ColorsOnTheWeb

·         And try WebAIM’sColor Contrast Checker

§  Include fully accessible images

§  Include a fully accessible table

§  Ensure your navigation is fully accessible

§  Try some intra-page navigation and keep it consistent and add “skip” capabilities up and down the page.

HTML Mark-up

·         Mark up your content using the HMTL5 doctype

·         Elements should be semantically correct

·         Include appropriate HTML5 structural elements

·         HTML should validate

·         Only images that are part of the site’s content should be included in your mark-up.

·         All others should be CSS background images

CSS

·         Your three pages are a single site so your CSS should help it look that way and aid it’s accessibility.

·         Use only external CSS to style your site and it should validate (except for experimental features used)

·         CSS should reflect application of the CRAP principles and follow accessibility and usability guidelines.

·         It should also accommodate for display across devices of differing sizes and screen resolutions (the approach you choose should be responsive web design)

DO NOT INCLUDE ANY JAVASCRIPT FOR THIS PART OF THE ASSIGNMENT

Navigation

·         All pages should contain a uniform site level navigation (all pages should link to all other pages).

·         Navigation should be styled to help users, not confuse them.

·         It should be consistent throughout the site.

·         Also, hypertext linking within pages in encouraged where appropriate.

Web Writing

The copy on the page should reflect sound principles of web writing.

The Home Page of your site

·         The site name should reflect the content of your site.

o   Please don’t name it “Assignment 1a” etc. Choose a unique, relevant name

·         Include a short, very clear introduction paragraph to the site

·         Clearly show users how they can find the site’s content.

·         You are encouraged to add images to this page, but if they are not your own then they must not be copyrighted and they must be referenced. Try Creative Commons.

Submission

·         Publically accessible web hosting

o   Upload your site to the Spinetail Server, or to make it available as a GitHub Pages project if you’d like to use git

·         Learnline

o   Then upload your entire mini-site in azipped folder to the Assessment Details & Submissions link in Learnline (include all files in their correct folder structure)

o   Include the URL to your publically accessible web hosting in a separate text file, inside the zipped folder.

·         Note:

o   Your assignment submission time is considered to be the time that you upload the zipped folder to Learnline.

o   Unhosted sites will not be marked.

o   Your mini-site must also remain publically accessible (at the same URL on Spinetail or GitHub Pages) for the duration of the semester (end of final exam period)

Lecturers note:

This assignment is not just about writing HTML code and then adding CSS to make the page look nicer. You’ll need to use what you have learned already in HIT164 and then do some further reading about HTML5, CSS3, responsive web design, accessibility and usability; and from these determine how to best develop your site.

Work on the HTML first and get the content correctly marked up, without even thinking about styling. Your site should be well structured and just work (form and function); then you can proceed to style it with CSS.

Don’t be tempted to use HTML elements for styling (e.g. use of <h6> just to make a heading smaller). The first heading on a page should be inside an <h1> element, the second level should be <h2> etc.